<template>
  <div class="header">
    <el-radio-group v-model="state.type" @change="radioChange" size="default" fill="#FF0F40">
      <el-radio-button label="type_1">行政区域</el-radio-button>
      <el-radio-button label="type_2">管理单位</el-radio-button>
      <el-radio-button label="type_3">中心运维</el-radio-button>
    </el-radio-group>
    <div class="header_right">
      <el-checkbox v-model="SettingStore.mapTheme" :true-label="true" :false-label="false" size="large">深色地图</el-checkbox>
      <div class="header_right_btn" @click="propertyListHandler">
        <SvgIcon name="list" width="14px" height="14px" />
        <span class="label">资产列表</span>
      </div>
      <div class="header_right_btn linear" @click="chartHandler">
        <SvgIcon name="chart1" width="14px" height="14px" color="#fff" />
        <span class="label">{{ !SettingStore.fold ? '隐藏' : '显示' }}全部图表</span>

      </div>
    </div>
  </div>
</template>
<script setup lang='ts'>

import { reactive } from 'vue';
const $emit = defineEmits(['typeChange'])
const state = reactive({
  type: 'type_1'
})
//  类型切换
const radioChange = (value: string) => {
  $emit('typeChange', value)
}
//  图表显示隐藏
import useSettingStore from '@/store/modules/setting'
let SettingStore = useSettingStore()
const chartHandler = () => {
  SettingStore.fold = !SettingStore.fold
  SettingStore.foldLeft = SettingStore.fold
  SettingStore.foldRight = SettingStore.fold
}
//  资产列表显示隐藏
const propertyListHandler = () => {
  SettingStore.propertyShow = !SettingStore.propertyShow
}

</script>
<style scoped lang="scss">
.header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 52px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  background-color: #fff;

  .header_right {
    display: flex;

    .header_right_btn {
      padding: 7px 10px;
      border-radius: 4px;
      border: 1px solid #E5E5E5;
      margin-left: 10px;
      cursor: pointer;
      display: flex;
      align-items: center;

      .label {
        margin-left: 4px;
        font-size: 14px;
        font-weight: 500;
        color: #303133;
      }
    }

    .linear {
      background: linear-gradient(270deg, #63A4FF 0%, #467CFF 100%);

      .label {
        color: #fff;
      }
    }
  }
}
</style>